<template>
  <div class="app-container">

    <u-page title="虚拟商品">

      <div slot="header">
        <el-button type="primary" icon="el-icon-edit" @click="hdlOpen(newForm)">
          {{ textMap['create'] }}
        </el-button>
      </div>

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="商品名称" prop="goodsName">
            <el-input v-model="listQuery.goodsName" placeholder="关键词搜索" clearable />
          </el-form-item>
          <el-form-item label="商品编号" prop="goodsNo">
            <el-input v-model="listQuery.goodsNo" placeholder="关键词搜索" clearable />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="listQuery.state" placeholder="请选择状态" class="state" clearable>
              <el-option value="" label="全部" />
              <el-option :value="1" label="上架" />
              <el-option :value="2" label="下架" />

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-dropdown>
              <el-button type="primary">
                批量操作<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :disabled="selectData.length===0" @click.native="hdlDel">批量删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">编辑</el-button>
              <el-button type="text" @click="hdlDelete(row.id, row.goodsName)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" @confirm="dialogStatus==='create'?hdlCreate():hdlUpdate()">
      <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-width="125px">

        <el-form-item label="商品类型" prop="goodsType">
          <el-radio-group v-model="dataForm.goodsType">
            <el-radio :label="1">定价商品</el-radio>
            <el-radio :label="2">非定价商品</el-radio>
          </el-radio-group>
        </el-form-item>

<!--        <el-form-item label="商品类目" prop="categoryId">
          <gdcals v-model="dataForm.categoryId" width="160px"/>
        </el-form-item>-->

        <el-form-item label="商品类目" prop="categoryId">
          <el-select v-model="dataForm.categoryIdList" placeholder="请选择商品类目" clearable multiple collapse-tags :style="{ 'width': width }" >
            <el-option v-for="item in goodsCategoryList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>


        <el-form-item label="商品编号" prop="goodsNo">
          <el-input v-model="dataForm.goodsNo" placeholder="请输入商品编号" />
        </el-form-item>

        <el-form-item label="虚拟商品编号" prop="virtualGoodsNo">
          <el-input v-model="dataForm.virtualGoodsNo" placeholder="请输入虚拟商品编号" />
        </el-form-item>
        <el-form-item label="虚拟商品类型" prop="virtualGoodsType">
          <el-input v-model="dataForm.virtualGoodsType" placeholder="请输入虚拟商品类型，如月卡、年卡等" />
        </el-form-item>
        <el-form-item label="虚拟商品面额" prop="virtualGoodsGoodsNum">
          <el-input v-model="dataForm.virtualGoodsGoodsNum" placeholder="请输入虚拟商品面额，如30" />
        </el-form-item>
        <el-form-item prop="goodsLogo" label="商品logo图片">
          <u-upload v-model="dataForm.goodsLogo" name="file" tips="建议尺寸:650 * 350像素" />
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="dataForm.goodsName" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="权重" prop="sort">
          <el-input-number v-model="dataForm.sort" :step="1" :min="0" />
        </el-form-item>

        <el-form-item label="商品描述" prop="goodsDesc">
          <el-input v-model="dataForm.goodsDesc" type="textarea" placeholder="请输入商品描述" />
        </el-form-item>
        <el-form-item label="原价(元)" prop="originalPrice">
          <el-input v-model="dataForm.originalPrice" placeholder="请输入原价" />
        </el-form-item>
        <el-form-item label="价格" prop="priceAmount">
          <el-col :span="7">
            <el-input-number
              v-model="dataForm.priceAmount"
              :precision="2"
              :step="0.01"
              placeholder="请输入价格(元)"
              size="medium"
              oninput="value=value.replace(/[^\d.]/g,'')"
            />
          </el-col>
          <el-col class="line" :span="2">+  积分</el-col>
          <el-col :span="7">
            <el-input-number v-model="dataForm.pricePoints" :step="1" :min="0" />
          </el-col>
        </el-form-item>
        <el-form-item label="库存" prop="inventory">
          <el-input-number v-model="dataForm.inventory" :step="1" :min="0" />
        </el-form-item>

        <el-form-item label="商品轮播图片" prop="goodsPollingImage">
          <u-upload v-model="dataForm.goodsPollingImage" name="file" :multiple="true" tips="建议尺寸:650 * 350像素;内容主体所在区域,推荐尺寸650 * 350像素" />
        </el-form-item>
        <el-form-item label="单人限购数量" prop="quota">
          <el-input-number v-model="dataForm.quota" :step="1" :min="0" />
        </el-form-item>
        <el-form-item label="失败处理方式" prop="failHandle">
          <el-radio-group v-model="dataForm.failHandle">
            <el-radio :label="1">不处理</el-radio>
            <el-radio :label="2">原路退款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需充值账号" prop="isNeedAccount">
          <el-radio-group v-model="dataForm.isNeedAccount">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.isNeedAccount=='1'" label="充值账号类型" prop="accountType">
          <el-select
            v-model="dataForm.accountTypeList"
            multiple
            collapse-tags
            size="medium"
            placeholder="请选择充值账号类型"
          >
            <el-option
              v-for="item in accountsoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="权益" prop="equity">
          <el-input v-model="dataForm.equity" type="textarea" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item v-if="dataForm.jumpType=='2'" label="跳转路径" prop="jumpUrl">
          <el-input v-model="dataForm.jumpUrl" placeholder="请输入跳转路径" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="dataForm.state">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </u-dialog>

  </div>
</template>
<script>

/* import gdcals from '../components/gdcals' */
export default {
  /* components: {
    gdcals
  }, */
  data() {
    return {
      api: this.$u.api.PluginsScanpayVirtualgoods,
      accountsoptions: [{
        value: '1',
        label: '手机号'
      }, {
        value: '2',
        label: '账号'
      }, {
        value: '3',
        label: 'qq号'
      }],
      // 表格
      columns: [

        {
          prop: 'categoryName',
          label: '商品类目'
        },
        {
          prop: 'goodsType',
          label: '商品类型',
          render: (h, params) => {
            const { goodsType } = params.row
            if (goodsType === 1) {
              return h('el-tag', { props: { type: 'info' }}, '定价商品')
            } else if (goodsType === 2) {
              return h('el-tag', { props: { type: 'info' }}, '非定价商品')
            }
          }
        },
        {
          prop: 'goodsNo',
          label: '商品编号'
        },
        {
          prop: 'goodsLogo',
          label: '商品LOGO',
          image: true
        },
        {
          prop: 'goodsName',
          label: '商品名称'
        },

        {
          prop: 'sort',
          label: '权重'
        },
        {
          prop: 'originalPrice',
          label: '商品原价'
        },
        {
          prop: 'price',
          label: '价格'
        },
        {
          prop: 'haveSoldNum',
          label: '已售卖数量'
        },
        {
          prop: 'inventory',
          label: '库存'
        },
        //
        // {
        //   prop: 'sort',
        //   label: '权重'
        // },
        {
          prop: 'state',
          label: '状态',
          render: (h, params) => {
            const { state } = params.row
            if (state === 2) {
              return h('el-tag', { props: { type: 'danger' }}, '下架')
            } else if (state === 1) {
              return h('el-tag', { props: { type: 'success' }}, '上架')
            }
          }
        },
        {
          prop: 'createdAt',
          label: '创建时间',
          timestamp: true
        }
      ],

      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: true, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        beginTime: '',
        endTime: '',
        name: '',
        mobile: '',
        status: ''
      },

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑虚拟商品',
        create: '新增虚拟商品'
      },
      dataForm: { inventory: 0, quota: 0, pricePoints: 0 },
      rules: {
        goodsType: [
          { required: true, message: '商品类型不能为空', trigger: 'blur' }
        ],
        /* categoryId: [
          { required: true, message: '商品类目不能为空', trigger: 'blur' }
        ], */
        goodsNo: [
          { required: true, message: '商品编号不能为空', trigger: 'blur' }
        ],
        virtualGoodsNo: [
          { required: true, message: '虚拟商品编号不能为空', trigger: 'blur' }
        ],
        virtualGoodsType: [
          { required: true, message: '虚拟商品充值类型不能为空', trigger: 'blur' }
        ],
        virtualGoodsGoodsNum: [
          { required: true, message: '虚拟商品面额不能为空', trigger: 'blur' }
        ],
        goodsLogo: [
          { required: true, message: '商品LOGO不能为空', trigger: 'blur' }
        ],
        goodsName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        goodsDesc: [
          { required: true, message: '商品描述不能为空', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '商品状态不能为空', trigger: 'blur' }
        ],
        failHandle: [
          { required: true, message: '充值处理类型不能为空', trigger: 'blur' }
        ],
        goodsPollingImage: [
          { required: true, message: '图片轮播图不能为空', trigger: 'blur' }
        ],
        isNeedAccount: [
          { required: true, message: '是否需要账号不能为空', trigger: 'blur' }
        ],
        inventory: [
          { required: true, message: '库存不能为空', trigger: 'blur' }
        ],
        equity: [
          { required: true, message: '权益不能为空', trigger: 'blur' }
        ]
      },
      // 删除选中数据
      selectData: [],
      active: 'first',
      goodsCategoryList: []
    }
  },
  created() {
    this.hdlList()
    // 初始化数据
    this.initData()
  },
  methods: {
    initData() {
      this.$u.api.PluginsScanpayGoodscategory.datalist({ 'state': '1' }).then(res => {
        this.goodsCategoryList = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-container{

    & >>> .el-drawer__body {
      overflow: auto;
    }

    .uploader{

      .thumb{
        display: inline-block;
        text-align: center;
        outline: none;
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 120px;
        height: 120px;
        cursor: pointer;
        line-height: 120px;
        vertical-align: top;

        ::v-deep {
          .el-image {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 6px;
          }

          img{
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 6px;
          }
        }
      }
    }

  }
</style>
